<template>
  <div>
    <div class="page_box">
      <el-form label-width="80px" label-position="left" class="demo-ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="活动名称:"  prop="name">
              <el-input size="mini" placeholder="请输入跑团名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="20px">
              <el-button class="search_btn" size="mini" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 标签栏 -->
      <el-tabs style="margin-top:20px" size="mini" v-model="activeName">
        <el-tab-pane label="全部" name="first">
            <span slot="label"> 全部
               <span class="tab-badge">{{all}}</span>
             </span>
        </el-tab-pane>
        <el-tab-pane label="未处理" name="second">
            <span slot="label"> 未处理
               <span class="tab-badge">{{untreated}}</span>
             </span>
        </el-tab-pane>
        <el-tab-pane label="处理中" name="third">
            <span slot="label"> 处理中
               <span class="tab-badge">{{inHand}}</span>
             </span>
        </el-tab-pane>
        <el-tab-pane label="已同意" name="fourth">
            <span slot="label"> 已同意
               <span class="tab-badge">{{agree}}</span>
             </span>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="five">
            <span slot="label"> 已拒绝
               <span class="tab-badge">{{reject }}</span>
             </span>
        </el-tab-pane>
      </el-tabs>
      <!-- 表格 -->
      <el-table
        border
        size="mini"
        :header-cell-style="{background:'#f8f8f8',color:'#333',borderRight:0}"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column label="序号" width="60" type="index"></el-table-column>

        <el-table-column
          width="150"
          v-for="( item,index ) in tableHeader"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        ></el-table-column>
        <el-table-column label="操作" width="200px"  fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-check" @click="audit(scope.row,scope.$index)">审核</el-button>
            <el-button size="mini" icon="el-icon-s-flag" @click="remarkShow(scope.row,scope.$index)">备注</el-button>
          </template>
        </el-table-column>
      </el-table>
        <div class="page-box">
          <el-pagination
            background
            small
            :current-page="current_page"
            :page-size="per_page"
            layout="total, prev, pager, next, jumper"
            :total="30"
          ></el-pagination>
        </div>
    </div>

    <el-dialog title="提示" :visible.sync="auditDialog" width="30%" center>
      <div class="audit_content">
        <el-form :model="auditForm" label-width="100px">
          <el-form-item label="跑团余额：">
            <el-input disabled size="mini" v-model="auditForm.balance"></el-input>
          </el-form-item>
          <el-form-item label="提现金额：">
            <el-input disabled size="mini" v-model="auditForm.deposit"></el-input>
          </el-form-item>
          <el-form-item label="手续费：">
            <el-input disabled size="mini" v-model="auditForm.serviceCharge"></el-input>
          </el-form-item>
          <el-form-item label="提现备注：">
            <el-input disabled type="textarea" size="mini" v-model="auditForm.remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="danger" @click="refuse">拒绝</el-button>
        <el-button class="submit" size="small"  @click="auditDialog = false">提交</el-button>
      </span>
    </el-dialog>
     <el-dialog title="信息" :visible.sync="refuseDialog" width="30%" center>
      <el-input type="textarea" v-model="auditForm.refuseReason"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button class="submit" size="small"  @click="refuseTrue">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog  title="备注" :visible.sync="remarkDialog" width="30%" center>
        <span >{{auditForm.remark}}</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      all:10,
      untreated:45,
      inHand:4,
      agree:7,
      reject :5,
      current_page: 1,
      per_page:10,
      remarkDialog: false,
      auditDialog:false,
      refuseDialog:false,
      auditForm:{},
      tableHeader: [
        { label: "跑团名称", prop: "runName" },
        { label: "联系人", prop: "linkman" },
        { label: "联系方式", prop: "phone" },
        { label: "提现金额", prop: "deposit" },
        { label: "手续费", prop: "serviceCharge" },
        { label: "提现时间", prop: "cashTime" },
        { label: "拒绝原因", prop: "refuseReason" }
      ],
      tableData: [
        {
          runName: "多为跑友会",
          linkman: "方式",
          phone: "16685859696",
          deposit: "100.00",
          balance:'200.00', // 余额
          serviceCharge: "1.00",
          remark:'123',
          cashTime: "2020-02-06 16:14:12",
          refuseReason: ""
        }
      ],
      activeName: "first",
      form: {
        keyWord: ""
      }
    };
  },
  methods: {
    audit(content, index) {
      this.auditDialog = true;
      this.auditForm = content
      console.log(content, index);
    }, 
    refuse () {
      // this.auditDialog = false;
      this.refuseDialog = true;
    },
    refuseTrue () {
      this.refuseDialog = false;
      this.auditDialog = false;

    },
    remarkShow (content,index) {
      this.remarkDialog = true
      this.auditForm = content
    }
  }
};
</script>

<style scoped>
@import url("../../assets/css/finance/cash.css");
</style>